<template>
  <el-card>
    <div v-if="props.title" class="card-header">
      <h4>
        <strong>{{ props.title }}</strong>
      </h4>
    </div>
    <div class="card-body">
      <el-table v-loading="loading" :data="testCaseList">
        <el-table-column label="序号" width="100" align="center" type="index">
          <template #default="scope">
            {{ scope.$index + (queryParams.page - 1) * queryParams.limit + 1 }}
          </template>
        </el-table-column>
        <el-table-column
          label="用例级别"
          width="100"
          align="center"
          prop="level"
          sortable
          :show-overflow-tooltip="true"
        >
          <template #default="scope">
            <y-dict-tag :options="tms_tc_level" :value="scope.row.level" />
          </template>
        </el-table-column>

        <el-table-column
          label="用例编号"
          min-width="300"
          align="center"
          prop="number"
          sortable
          :show-overflow-tooltip="true"
        >
          <template #default="scope">
            <router-link
              :to="'/tms/testcase-info/index/' + scope.row.id"
              class="link-type"
            >
              <span>{{ scope.row.number }}</span>
            </router-link>
          </template>
        </el-table-column>
        <el-table-column
          label="用例名称"
          align="center"
          prop="name"
          :show-overflow-tooltip="true"
          sortable
        />
        <el-table-column label="状态" align="center" prop="status" sortable>
          <template #default="scope">
            <y-dict-tag
              :options="sys_enable_disable"
              :value="scope.row.status"
            />
          </template>
        </el-table-column>
      </el-table>
      <y-pagination
        class="card-pagination"
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.page"
        v-model:limit="queryParams.limit"
        @pagination="getList"
      />
    </div>
  </el-card>
</template>

<script setup name="CasesCard">
import { listTestCase } from "@/api/tms/testcase";

const { proxy } = getCurrentInstance();
const { sys_enable_disable, tms_tc_level } = proxy.useDict(
  "sys_enable_disable",
  "tms_tc_level"
);

const total = ref(0);
const loading = ref(false);
const testCaseList = ref([]);

const props = defineProps({
  title: {
    type: String,
    default: "用例信息",
  },
  module: {
    type: String,
    default: undefined,
  },
  testplan: {
    type: String,
    default: undefined,
  },
});

const queryParams = reactive({
  module: props.module,
  status: undefined,
  page: 1,
  limit: 10,
});

/** 监控Props变化，并更新查询参数 */
watch(
  [() => props.module, () => props.testplan],
  ([newModule, newTestPlan], [oldModule, oldTestPlan]) => {
    if (newModule !== oldModule || newTestPlan !== oldTestPlan) {
      queryParams.module = newModule;
      queryParams.testplan = newTestPlan;
      getList();
    }
  },
  { immediate: true }
);

/** 查询列表 */
async function getList() {
  loading.value = true;
  try {
    const response = await listTestCase(queryParams);
    testCaseList.value = response.data;
    total.value = response.total;
  } catch (error) {
    console.error("Failed to fetch testcases:", error);
  } finally {
    loading.value = false;
  }
}

/** Expose方法 */
defineExpose({
  getList,
});
</script>
